<template>
  <div class="app-page-scroll">
    <t-card header="基础用法">
      <div class="cpm-separator">基于url：data="/system/user/query"</div>
      <lg-auto-complete v-model="value" options="/system/user/query" value-field="nickname" />

      <div class="cpm-separator">基于api：:data="api.query"</div>
      <lg-auto-complete v-model="value" :options="api.query" value-field="nickname" />

      <div class="cpm-separator">基于字符串数组：:data="String[]"</div>
      <lg-auto-complete v-model="value" :options="strings" />

      <div class="cpm-separator">基于对象数组：:data="Object[]"</div>
      <lg-auto-complete v-model="value" :options="objects" value-field="name" />

      <div class="cpm-separator">基于函数：:data="func"</div>
      <lg-auto-complete v-model="value" :options="func" />
    </t-card>

    <!---------------------------------   api说明文档      -------------------------------------------->
    <t-card header="属性">
      <t-base-table :columns="propColumns" :data="propsData" style="width: 100%" />
      <div>其他属性参考 t-auto-complete 组件</div>
    </t-card>
    <t-card header="事件">
      <t-base-table :columns="emitColumns" :data="emitData" style="width: 100%" />
      <div>事件参考 t-auto-complete 组件</div>
    </t-card>
    <t-card header="插槽">
      <t-base-table :columns="slotColumns" :data="slotData" style="width: 100%" />
    </t-card>
    <t-card header="api">
      <t-base-table :columns="apiColumns" :data="apiData" style="width: 100%" />
    </t-card>
  </div>
</template>
<script lang="ts" setup>
import './index.less';
import { ref } from 'vue';
import { Select } from 'tdesign-vue-next';
import { LgBizSelect } from '@/soar';
import api from '@/pages/system/auth/user/api';
import { apiColumns, emitColumns, propColumns, slotColumns } from './index';
import LgAutoComplete from '@/soar/components/LgAutoComplete/index.vue';

const value = ref();

const strings = ['开发', '测试', '产品', '项目'];
const objects = [{ name: '开发' }, { name: '测试' }, { name: '产品' }, { name: '项目' }];
const func = () => strings;

const propsData = [
  { name: 'options', desc: '数据(源)', type: 'string | Function | Array | Promise', def: '' },
  {
    name: 'value-field',
    desc: '值格式，支持字段名和模板字符串，例：field 或 ${field1}（${field2}）',
    type: 'string',
    def: '',
  },
];

const emitData = [
  // { name: 'initialized', desc: '组件初始化事件', param: 'string' },
];

const apiData = [
  // { name: 'reload', desc: '重新加载数据，支持传入参数', type: 'function', sample: 'reload({ "name-like": "测试" })' },
];

const slotData = [
  // { name: 'default', desc: '默认插槽，用于自定义渲染', scope: 'loading，options，reload, props' }
];
</script>
